<template>
  <div class="science-trends">
    <div class="title"></div>
    <div class="main">
      <LineEcharts
          :echartsData="echartsData"
          :color="['rgba(221, 150, 13, 1)', 'rgba(2, 122, 206, 1)']"
          :graphicColor="[
          ['rgba(221, 150, 13, 0.3)', 'rgba(221, 150, 13, 0)'],
          ['rgba(2, 122, 206, 0.3)', 'rgba(2, 122, 206, 0)'],
        ]"
      />
    </div>

    <div class="select-box">
      <n-select v-model:value="selectValue" :options="selectData" class="!w-[182px]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import LineEcharts from '@/components/echarts/lineChart.vue';

const selectValue = ref('1');
const selectData = [
  {
    label: '下发整改通知',
    value: '1',
  },
];
const echartsData = {
  label: ['6-25', '6-26', '6-27', '6-28', '6-29', '6-30', '7-1', '7-2'],
  data: [
    {
      name: '通知数',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '下发单位',
      value: [90, 89, 97, 99, 100, 104, 108, 101],
    },
  ],
};


defineComponent({ name: 'ScienceTrends' });
</script>

<style scoped lang="scss">
.science-trends {
  @apply relative w-full h-auto flex flex-col justify-between;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[256px];
  }

  .select-box {
    @apply absolute top-[-8px] right-0;
  }
}
</style>
